<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
	<head>
	
    <title>CBE BPE Toolkit - Weather</title>

	<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/anytime/css/anytimec.css"/>
    <link rel="stylesheet" type="text/css" href="/static/jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css"/>
    <link rel="stylesheet" type="text/css" href="/static/pmp/css/plot.css"/>
    <style type="text/css">
      body {
        padding-top: 55px;
        padding-bottom: 30px;
      }
      .sidebar-nav {
        padding: 5px 0;
      }
    </style>
    
    <script type="text/javascript" src="/static/jquery-1.7.2/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/jquery-ui/js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/static/sessvars/sessvars.js"></script>
	<script type="text/javascript" src="/static/flot-0.7/js/date.js"></script>
	<script type="text/javascript" src="/static/anytime/js/anytimec.js"></script>
	<script type="text/javascript" src="/static/anytime/js/anytimetz.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
			$("li#" + window.location.pathname.substring(5, window.location.pathname.length - 1)).addClass("active") 	
		    $('select#id_name').change(function() { 
	    		var projectId = $(this).val();
	    		sessvars.sessionObj['projectId'] = projectId;
	    		sessvars.$.flush()
	    	});
	    	$('#start_weather').click(function(){
	    		$.ajax({
					type: "GET",
					url: '/pmp/weather/',
					data: {'station':$('#weather_station').val(),'select':'start', 'projectId': sessvars.sessionObj['projectId']},
					success: function(data){
						$('#success1').html(data).fadeIn().delay(2000).fadeOut(3000);	        
					}
				});	
	    	});
	    	$('#stop_weather').click(function(){
	    		$.ajax({
					type: "GET",
					url: '/pmp/weather/',
					data: {'station':$('#weather_station').val(),'select':'stop', 'projectId': sessvars.sessionObj['projectId']},
					success: function(data){
						$('#success1').html(data).fadeIn().delay(2000).fadeOut(3000);	        
					}
				});	
	    	});
	    	$('#restart_weather').click(function(){
	    		$.ajax({
					type: "GET",
					url: '/pmp/weather/',
					data: {'select':'restart', 'projectId': sessvars.sessionObj['projectId']},
					success: function(data){
						$('#success1').html(data).fadeIn().delay(2000).fadeOut(3000);	        
					}
				});	
	    	});
	    	$('#startTimeBtn').click(
		  	function(e) {
	    		$('#start_date').AnyTime_noPicker().AnyTime_picker({format: "%Y-%m-%d"}).focus();
	        	e.preventDefault();
	      	} 
		    );
		    $('#endTimeBtn').click(
			 	function(e) {
		    		$('#end_date').AnyTime_noPicker().AnyTime_picker({format: "%Y-%m-%d"}).focus();
		    	   	e.preventDefault();
		     	} 
		    );
		    $('#load_weather').click(function(){
	    		if ($('#weather_q_select').find(":selected").val() == 'zipcode'){
	    			var q_type = 'zipcode'
	    		}
	    		else{
	    			var q_type = 'pws'
	    		}
	    		data_obj = {'q_type':q_type, 'q_input1':$('#q_input1').val(), 'q_input2':$('#q_input2').val(), 'start_date':$('#start_date').val().replace(/-/g,''), 'end_date':$('#end_date').val().replace(/-/g,''), 'projectId': sessvars.sessionObj['projectId']}
	    		$.ajax({
					type: "GET",
					url: '/pmp/weather/',
					data: data_obj,
					success: function(data){
						$('#success2').html(data).fadeIn().delay(2000).fadeOut(3000);	        
					}
				});	
	    	});
		    $('#weather_q_select').change(function(){
		    	weatherSelect($(this))
		    })
		    weatherSelect($('#weather_q_select'))
	    });
	    function weatherSelect(selector){
	    	if (selector.find(":selected").val() == 'zipcode'){
	    		$('#weather_q').html('<input type="text" placeholder="City" class="span2" id="q_input1" />&nbsp;<input type="text" placeholder="Zipcode" class="span1" id="q_input2" />')
	    	}
	    	else if (selector.find(":selected").val() == 'city'){
	    		$('#weather_q').html('<input type="text" placeholder="City" class="span2" id="q_input1" />&nbsp;<input type="text" placeholder="ST" class="input-mini" id="q_input2" />')
	    	}
	    	else{
	    		$('#weather_q').html('<input type="text" placeholder="City" class="span2" id="q_input1" />&nbsp;<input type="text" placeholder="Station ID: e.g. KCABERKE28" class="span2" id="q_input2" />')
	    	}
	    }
	</script>
  </head>

  <body>
    {% include 'header.html' %}
        <div class="span10" id="mainContent">
        	<div class="row">
        		<div class="span7">
		        	<h3>Weather data tool</h3>
		        	<p>This weather data tool will create, stop, and start sMAP weather data sources using Wunderground.com data. You may choose
		        		to start a "current conditions" sMAP data source which will download current conditions for the specified weather station every minute.
		        		This feature is only compatible with Wunderground personal weather stations (PWS) and cannot be used with airport weather stations.
		        		It is recommended that new projects use this feature to obtain a good historical record of weather conditions during the project
		        		dates. Weather station codes can be looked up on the <b><a href="http://www.wunderground.com/wundermap/" target="_blank">Wundermap</a></b>.
		        		The second option is to load historical data (daily summary data) for the specified date range. This feature does allow looking up
		        		weather stations other than personal weather stations by using a zipcode. This feature requires the use of the Wunderground API
		        		which is limited to 500 requests per day. Please do not specify a time range greater than 100 days.
		        	</p>
		        	<h5>Current conditions</h5>
		        	<div id="currentConditions" style="margin-top: 5px">
		        	<label>Weather station ID</label>
		        	<input type="text" class="span2" id="weather_station" placeholder="Station ID: e.g. KCABERKE28"/><br>
		        	<button class="btn btn-small" id="start_weather">Add weather source</button>
		        	<button class="btn btn-small" id="stop_weather">Stop weather source</button>
		        	<button class="btn btn-small" id="restart_weather">Restart all weather sources</button><br>
		        	<div id="success1" style="font-weight: bold; margin-top: 5px"></div>
		        	</div>
		        	<h5 style="margin-top: 10px">Historical data</h5>
		        	<div id="historicalData" style="margin-top: 5px">
		        	<label>Select the type of weather station query</label>
		        	<select id="weather_q_select" class="span2">
		        		<option value="pws">City/Weather station ID</option>
		        		<option value="zipcode">City/Zipcode</option>
		        	</select>
		        	<div id="weather_q"></div> 
		        	<input class="span2" type="text" id="start_date" placeholder="Start date"/>
		        	<button id="startTimeBtn" style="margin-bottom: 7px">
		    		<img src="/static/pmp/img/calendar.png" alt="[calendar icon]"/>
		  			</button>
		  			<input class="span2" type="text" id="end_date" placeholder="End date"/>
		        	<button id="endTimeBtn" style="margin-bottom: 7px">
		    		<img src="/static/pmp/img/calendar.png" alt="[calendar icon]"/>
		  			</button><br>
		  			<button class="btn btn-small" id="load_weather">Load weather</button><br>
		  			<div id="success2" style="font-weight: bold; margin-top: 5px"></div>
		  			</div>
		        </div><!--end of intro div-->
        	</div><!--end row-->
        </div><!--/span10-->
      </div><!--/row-->
      <hr>
		{% include 'footer.html' %}

    </div><!--/.fluid-container-->


<script>
	//console.log(sessvars.sessionObj)
	if (typeof sessvars.sessionObj == 'undefined'){sessvars.sessionObj = {'projectId': $('select#id_name').find("option:selected").val()};}
	if (typeof sessvars.sessionObj != 'undefined'){
		if (sessvars.sessionObj['projectId'] == ""){sessvars.sessionObj['projectId'] = $('select#id_name').find("option:selected").val();}
		else {
			for (var i=0;i<document.getElementById('id_name').options.length;i++) {
				if (document.getElementById('id_name').options[i].value == sessvars.sessionObj['projectId'])
					{document.getElementById('id_name').options[i].selected = true;}
			}
		}
	}

</script>
</body></html>